<template>
    <div>
        <card>
            <!--查询条件-->
            <Row>
                <Form>
                    <Form :model="filters" ref="filters" label-position="right" :label-width="90" inline>
                        <FormItem label="小区">
                            <div class="filters-input">
                                <el-select v-model="filters.housingId" @change="housechange" placeholder="请选择小区" filterable no-data-text="暂无数据">
                                    <el-option v-for="item in houseList" :value="item.id" :key="item.id" :label="item.name"></el-option>
                                </el-select>
                            </div>
                        </FormItem>
                    </Form>
                </Form>
            </Row>
            <!--功能-->
            <Row>
                <Button type="primary" icon="md-add" @click="openAdd" style="margin-right: 10px;">新增</Button>
            </Row>
            <!--加载数据-->
            <el-table stripe border v-loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="responsibleArea" label="负责区域" width="160px"></el-table-column>
                <el-table-column prop="responsibleDeviceType" label="负责设备类型"></el-table-column>
                <el-table-column prop="responsiblePersonId" label="编码"></el-table-column>
                <el-table-column prop="responsiblePersonName" label="负责人姓名"></el-table-column>
                <el-table-column prop="responsiblePersonPhone" label="负责人联系方式"></el-table-column>
                <el-table-column label="操作" align="center" width="150px">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="openModify(scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="openDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
            <!--新增-->
            <Modal v-model="addVisible">
                <Form :model="adds" ref="adds" label-position="right" :label-width="90" inline>
                    <FormItem label="小区">
                        <div>
                            <el-select v-model="adds.housingId" placeholder="请选择小区" filterable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id" :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="负责区域">
                        <Input type="text" v-model="adds.responsibleArea" placeholder="请输入负责区域" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="设备类型">
                        <el-select v-model="adds.responsibleDeviceType" clearable placeholder="请选择">
                            <el-option
                                v-for="item in deviceTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.name">
                            </el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="设备负责人">
                        <el-input type="text" v-model="adds.responsiblePersonName" @focus="alertMemberDialog" placeholder="请选择设备负责人"></el-input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" size="large" @click="onCancel">取消</Button>
                    <Button type="primary" size="large" @click="handleSubmit">确定</Button>
                </div>
            </Modal>
            <!--修改-->
            <Modal v-model="modifyVisible">
                <Form :model="modifys" ref="adds" label-position="right" :label-width="90" inline>
                    <FormItem label="小区">
                        <div>
                            <el-select v-model="modifys.housingId" disabled placeholder="请选择小区" filterable no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :value="item.id" :key="item.id" :label="item.name"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="负责区域">
                        <Input type="text" v-model="modifys.responsibleArea" placeholder="请输入负责区域" class="normal-input" clearable></Input>
                    </FormItem>
                    <FormItem label="设备类型">
                        <el-select v-model="modifys.responsibleDeviceType" @change="modifyTypeChange" placeholder="请选择">
                            <el-option
                                v-for="item in deviceTypeList" :key="item.id"
                                :value="item.name" :label="item.name">
                            </el-option>
                        </el-select>
                    </FormItem>
                    <FormItem label="设备负责人">
                        <el-input type="text" v-model="modifys.responsiblePersonName" @focus="alertMemberDialog" placeholder="请选择设备负责人"></el-input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="text" size="large" @click="onCancel">取消</Button>
                    <Button type="primary" size="large" @click="saveModify">确定</Button>
                </div>
            </Modal>
            <!--人员选择插件-->
            <MemberSelector :data-tree="treeList" mode="SingleMember" :data-member="memberList" ref="memberSelector"
                            @treenodeclick="treeNodeClick" @affirmative="confirmMember">
            </MemberSelector>
        </card>
    </div>
</template>

<script>
    import MemberSelector from "../../components/member-selector/selector";

    export default {
        name: "responsible",
        components: {
            MemberSelector
        },
        data(){
            return{
                pageNum: 1,
                pageSize: 10,
                pageTotal: 0,

                filters:{},
                adds:{
                    housingId:"",
                    responsiblePersonName:"",
                },
                modifys:{
                    responsiblePersonName:"",
                    responsibleDeviceType:"",
                },

                tableData:[],
                houseList:[],
                deviceTypeList:[],
                treeList: [],
                memberList:[],

                tableLoading:false,
                addVisible:false,
                modifyVisible:false,
            };
        },

        created:function(){
            this.gethouse();
            this.getDeviceType();
            this.getTreeData();
        },

        methods:{
            //小区改变
            housechange:function () {
                this.loadData();
            },
            //加载数据
            loadData:function () {
                this.tableLoading=true;
                this.filters.pageNum=this.pageNum;
                this.filters.pageSize=this.pageSize;
                this.postRequest("/api/responsible/loadData",this.filters).then(res=>{
                    if (res.code==20000) {
                        this.tableData=res.data.list;
                        this.pageTotal=res.data.total;
                        this.tableLoading=false;
                    }
                });
            },
            //获取小区
            gethouse:function () {
                this.postRequest("/api/housing/getHousingByLogin").then(res => {
                    this.houseList = res;
                    this.filters.housingId = res[0].id;
                    this.adds.housingId=res[0].id;
                    this.housechange();
                });
            },
            //获取设备类型
            getDeviceType:function(){
                this.getRequest("/api/parameter/loadData?type=1").then(res=>{
                    this.deviceTypeList=res.data;
                });
            },
            //获取部门信息
            getTreeData() {
                this.postRequest("/api/manageHR/getCompany").then(res => {
                    if (res.code == 20000) {
                        this.treeList = res.data;
                        //this.getCompanyId(this.filter);
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //部门点击选择
            treeNodeClick:function(data){
                this.getMemberList(data);
            },
            //获取成员
            getMemberList(data) {
                const params = {};
                params.pageNum=null;
                params.companyId = data.companyId;
                //与后台交换数据
                this.postRequest("/api/manageHR/userLoadData", params).then(res => {
                    if (res.code == 20000) {
                        const _this = this;
                        const tmpList =[];
                        res.data.list.forEach(function (c) {
                            const list = c;
                            list.label = (c.name);
                            tmpList.push(list);
                        });
                        this.memberList = tmpList;
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //确认选择人员
            confirmMember(data){
                this.adds.responsiblePersonId=data[0].id;
                this.adds.responsiblePersonName=data[0].name;
                this.adds.responsiblePersonPhone=data[0].phone;

                this.modifys.responsiblePersonId=data[0].id;
                this.modifys.responsiblePersonName=data[0].name;
                this.modifys.responsiblePersonPhone=data[0].phone;
            },
            //打开新增页面
            openAdd:function () {
                this.adds.housingId=this.filters.housingId;
                this.addVisible=true;
            },
            //确认新增
            handleSubmit:function(){
                this.postRequest("/api/responsible/addResponsible",this.adds).then(res=>{
                    if (res.code==20000){
                        this.$message.success("新增成功");
                        this.addVisible=false;
                        this.adds={},
                        this.modifys={},
                        this.loadData();
                    }
                });
            },
            //打开修改页面
            openModify:function(row){
                this.getRequest("/api/responsible/modifyResponsible?id="+row.id).then(res=>{
                    if (res.code==20000){
                        this.modifys.id=res.data.id;
                        this.modifys.housingId=res.data.housingId;
                        this.modifys.responsibleArea=res.data.responsibleArea;
                        this.modifys.responsibleDeviceType=res.data.responsibleDeviceType;
                        this.modifys.responsiblePersonName=res.data.responsiblePersonName;
                        this.modifyVisible=true;
                    }
                });
            },
            //保存修改
            saveModify:function(){
                this.postRequest("/api/responsible/saveModify",this.modifys).then(res=>{
                    if (res.code=20000){
                        this.$Message.success("修改成功");
                        this.modifyVisible=false;
                        this.adds={},
                        this.modifys={},
                        this.loadData();
                    }
                });
            },
            modifyTypeChange:function(value){
                this.modifys.responsibleDeviceType=value;
            },
            //弹出删除提示框
            openDelete:function(row){
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该条记录？",
                    onOk: () => {
                        this.getRequest("/api/responsible/removeResponsible?id=" +row.id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.loadData();
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });
                    },
                    onCancel: () => {

                    }
                });
            },
            //弹出部门人员选择框
            alertMemberDialog:function(){
                this.$refs.memberSelector.showDialog();
            },
            //取消
            onCancel:function () {
                this.addVisible=false;
                this.modifyVisible=false;
            },
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
        }
    };
</script>
